// Vuex 数据持久化插件
// 这个插件演示了如何创建自定义Vuex插件来实现数据持久化

export default function createPersistencePlugin(options = {}) {
    const {
        storageKey = 'vuex-persistence',
        storage = localStorage,
        reducer = state => state, // 可以选择性地持久化状态的某些部分
        subscriber = store => handler => store.subscribe(handler) // 默认订阅所有mutations
    } = options
    
    return store => {
        // 从存储中恢复状态
        try {
            const savedState = storage.getItem(storageKey)
            if (savedState) {
                const parsedState = JSON.parse(savedState)
                store.replaceState({
                    ...store.state,
                    ...parsedState
                })
                console.log('✅ 状态已从本地存储恢复')
            }
        } catch (error) {
            console.error('❌ 恢复状态失败:', error)
        }
        
        // 订阅状态变化并持久化
        subscriber(store)((mutation, state) => {
            try {
                const stateToSave = reducer(state)
                storage.setItem(storageKey, JSON.stringify(stateToSave))
                console.log('💾 状态已保存:', mutation.type)
            } catch (error) {
                console.error('❌ 保存状态失败:', error)
            }
        })
    }
}

// 使用示例：
// import createPersistencePlugin from '@/store/plugins/persistence'
// 
// const persistencePlugin = createPersistencePlugin({
//     storageKey: 'my-app-state',
//     reducer: state => ({
//         // 只持久化特定的状态
//         user: state.user,
//         cart: state.cart.items
//     })
// })
// 
// export default new Vuex.Store({
//     // ... 其他配置
//     plugins: [persistencePlugin]
// })